<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移除事件</title>
    <style>
        .wrap {
            width: 440px;
            height: 420px;
            margin: 200px auto;
        }

        .box {
            width: 200px;
            height: 200px;
            margin: 10px;
            float: left;
        }

        #box1 {
            background-color: cornflowerblue;
        }

        #box2 {
            background-color: hotpink;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div id="box1" class="box"></div>
        <div id="box2" class="box"></div>
    </div>

    <script>
        var box1 = document.getElementById('box1');
        var box2 = document.getElementById('box2');

        /* 普通的添加移除事件 */
        box1.onclick = () => {      //添加
            console.log(1)
        }
        box1.onclick = null;        //移除



        function fun() {
            console.log(1);
        }
        /* 注册事件 */
        box2.addEventListener('click', fun, false);
        /* 移除事件 */
        box2.removeEventListener('click', fun, false);



        /* IE辣鸡浏览器的移除事件 */
        box1.attachEvent("onclick", fun);   //添加
        box1.detachEvent("onclick", fun);   //移除

    </script>
</body>

</html>